<template>
    <div>
        <Card shadow>
            <Row>
                <Col span="4">
                    <Timeline>
                        <TimelineItem>
                            <p class="time">2020年7月</p>
                            <p class="content">发布1.0版本</p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2021年11月</p>
                            <p class="content">开发2.0版本</p>
                        </TimelineItem>
                        <TimelineItem color="green">
                            <Icon type="md-bicycle" slot="dot"></Icon>
                            <p class="time">目前</p>
                            <p class="content">开发进行中</p>
                        </TimelineItem>
                    </Timeline>
                </Col>
                <Col span="4">
                    <i-circle
                            :size="150"
                            :trail-width="4"
                            :stroke-width="5"
                            :percent="statisticsData.percent"
                            stroke-linecap="square"
                            stroke-color="#8b9293">
                        <div>
                            <h4>今日浏览人数{{statisticsData.today}}</h4>
                            <div style="border-bottom: 5px double #685f6354;margin: 10px"></div>
                            <span>
                                总浏览人数
                                <i>{{statisticsData.total}}</i>
                            </span>
                        </div>
                    </i-circle>
                </Col>
                <Col span="16">
                    <Table :columns="columns" :data="tableData" size="small"></Table>

                    <Pagination
                            ref="pagination"
                            size="small"
                            :sizer="true"
                            :page.sync="listQuery.pageNumber"
                            :rows.sync="listQuery.pageSize"
                            :total="total"
                            @on-change="getTableData"/>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    import {findLogPage, statistics} from '@/api/login';
    import Pagination from '../components/Pagination' // 分页插件

    export default {
        name: "loginlog",
        components: {
            Pagination
        },
        data() {
            return {
                columns: [
                    {
                        title: '登录用户名',
                        key: 'username'
                    },
                    {
                        title: 'IP',
                        key: 'ip'
                    },
                    {
                        title: '区域',
                        key: 'area'
                    },
                    {
                        title: '运营商',
                        key: 'operator',
                        render: (h, params) => {
                            return h('span', params.row.operator + "(" + params.row.city + ")")
                        }
                    },
                    {
                        title: '登录时间',
                        key: 'loginTime',
                        width: 150
                    },
                    {
                        title: '系统',
                        key: 'system'
                    },
                    {
                        title: '浏览器',
                        key: 'browser'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
                statisticsData: {},
            }
        },
        created() {
            this.getTableData();
            this.statistics();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findLogPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            // 统计
            async statistics() {
                let res = await statistics();
                if (res.success) {
                    this.statisticsData = res.result;
                    this.statisticsData.percent = (this.statisticsData.today / this.statisticsData.total).toFixed(2) * 100;
                }
            }
        }
    }
</script>

<style scoped>
    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding-left: 5px;
    }
</style>
